
<template>
  <div class="all" >

    <div class="logo" style="float: left; text-align: center; margin-top: 20px "> 
      <img src="@/assets/logo.png" alt=""  style="width: 90px; margin-left: 40px;">
      <br>
      <span style="margin-left: 40px; color: white; font-size: 26px;">赣选</span>
    </div>
  <el-text class="mx-1"  style="float: right; margin-right: 100px; color: white" @click="into ">进入首页></el-text>
<div class="login" style="margin-left: 350px;margin-top: 60px;">
  <!-- <el-button>登录</el-button> -->
  
  <el-form :model="form" ref="formRef"  :rules="rules" label-width="80px"  size="normal">
    <el-form-item >
      <el-text class="mx-1"  style="margin-left: 45px; font-size: 24px;color: #66cdaa;">欢迎登录</el-text>
    </el-form-item>
    <el-form-item prop="userName" label="账号">
      <el-input v-model="form.userName" placeholder="请输入账号" style="width: 200px; "></el-input>
    </el-form-item>
    <el-form-item prop="password"  label="密码">
      <el-input v-model="form.password" placeholder="请输入密码" style="width: 200px;"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button  @click="submit" style="margin-left: 60px; background-color: #66cdaa; color: white;">登录</el-button>
      <!-- <el-button>取消</el-button> -->
    </el-form-item>
  </el-form>
<Vcode  :show="isShow"  @success="onSuccess" @close="onClose"/>
     
</div>
</div>

</template>

<script>
// import {loginAPI} from '@/apis/user'
import {useUserStore} from '@/stores/user'
 import router from '@/router';
import axios from '@/utils/request';
//  import { ref } from "vue";
import  {ElMessage}  from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
 import Vcode from "vue3-puzzle-vcode";
import { ref } from 'vue';
export default {
name:'MyLogin',
data(){
  return{
    isShow:false,
    formRef:ref(null),
       form:{
        userName:'',
        password:'',
       },
       rules: {
    userName: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min:6,max:16,message:'长度为6-16',trigger:'blur' },
        ]

}
      
  }
},
components:{
  Vcode
},
methods:{
  test(){
    const parmas={
      id:"1"
    }
        axios.post('/get1',JSON.stringify(parmas)).then(res=>{
      console.log(res.data);
    })

  },
  into(){
    router.replace({path:'/'})  
  },
  submit(){
    this.isShow = true;
  },
  onShow(){
    
  },
  onClose(){
    this.isShow = false;
  },
  onSuccess(){
    this.$refs.formRef.validate((valid)=>{
      console.log(valid);
      if(valid){
      //给pinia数据
      const useStore=useUserStore()
      const params={
        userName:this.form.userName,
        password:this.form.password
      }
      // axios.get('/respond').then(res=>{
      //   const token=res[0].data.token
      //   const freshtoken=res[0].data.token_flesh
      //   const userinformation=JSON.parse(res[0].data.user)
      //   useStore.getUserInfo({token,freshtoken,userinformation})
      //   console.log(useStore.userInfo.userinformation.id);
      //   console.log(res);
      //   console.log(res[0].data);
      //   console.log(res[0].data.token);
      //   console.log(res[0].data.token);
      //   ElMessage({type:'success',message:'登陆成功'})
      //               router.replace({path:'/'})  
      // })
    //res【0】
      axios.post('/logandregis_/login',JSON.stringify(params)).then(res=>{
        console.log(res);
        // console.log(res.data.token);
                    if (res.code===200)
                    {//获取token放入useStore
                      const token=res.data.token
        const freshtoken=res.data.token_flesh
        const userinformation=JSON.parse(res.data.user)
                      // pinia中添加token之后每次从发送请求从stores中获取token
        useStore.getUserInfo({token,freshtoken,userinformation})
                          // 登录成功
         ElMessage({type:'success',message:'登陆成功'})
                    router.replace({path:'/'})    
          }
                        else{
                          ElMessage({type:'error',message:'登陆失败'})
                        }
      })
      }
    })
    this.onClose();//验证成功手动关闭
  
    
                       
  }},
  //路由进入的时候
//   beforeRouteEnter(to,from,next){
// console.log('路由守卫',to,from);
// if(to.meta.isAuth){
// next();  
// }
//   },
}
</script>

<style >

.all {
  width: 1420px;
  height: 710px;
      background-image: url('../assets/login4.jpg');
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
    }

.login{
  position: absolute;
left: 500px; 
top: 220px;
}
html{
    height: 100%;
}
</style>